<template>
    <div class="main">
        <div id="box">
          <div class="atlasAll">
            <div class="top" :style="arrow === 0?{left: '60%'}:{left: '80%'}">
              <el-autocomplete class="searchInput" v-show="searchShow" v-model="searchValue" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" @select="handleSelect" placeholder="输入节点关键词搜索"/>
              <div class="searchIcon" @click="searchShow = !searchShow"><i class="el-icon-search" style="font-size: 16px"></i></div>
            </div>
            <div id="atlas"></div>
            <div class="bottom">
              <div class="btnAll">
                <button @click="openAndClose(0)">一键展开</button>
                <button @click="openAndClose(1)">一键收起</button>
              </div>
            </div>
            <div id="bottomRight">
              <div style="text-align: center">企业数量
                <el-tooltip class="item" effect="dark" content="数据统计范围为全部AB股上市企业" placement="right-start">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <div>( <span style="color:#FF6A93">浙江</span>/<span style="color:#FFC74F">全国</span> )</div>
            </div>
          </div>
          <div id="upperStrata" :style="arrow === 0?{width: '25%'}:{width: '3%'}">
            <div id="right" :style="arrow === 0 ?{display: 'block'}: {display: 'none'}">
              <div class="title">
                <p>节点介绍</p>
              </div>
              <div style="height:160px;overflow-y:scroll;color:#E5FBFF;padding: 20px;line-height: 25px">{{briefIntroduction}}</div>
              <div class="btn1">
                <div :class="active1 === 2?'selectBtn': ''" @click="selectBtn1(2)">技术</div>
                <div :class="active1 === 1?'selectBtn': ''" @click="selectBtn1(1)">人才</div>
                <div :class="active1 === 0?'selectBtn': ''" @click="selectBtn1(0)">企业</div>
              </div>
              <div style="width: 90%;margin: 0 auto 10px">
                <el-input
                  :placeholder="placeholder"
                  class="input1"
                  prefix-icon="el-icon-search"
                  v-model="input1"
                  @input="input1Change()">
                </el-input>
              </div>
              <div class="btn1" v-show="active1 === 0">
                <div :class="active2 === 1?'selectBtn': ''" @click="selectBtn2(1)">浙江省</div>
                <div :class="active2 === 0?'selectBtn': ''" @click="selectBtn2('')">全国</div>
              </div>
              <div id="tableColor" v-show="active1 === 0">
                <el-table
                  ref="table1"
                  :data="tableData1"
                  style="width: 100%"
                  height="230"
                  :row-class-name="tableRowClassName"
                  :row-style="{ height: '0' }"
                  :cell-style="{ padding: '6px 0', height: '36px' }"
                >
                  <el-table-column
                    property="entName"
                    :show-overflow-tooltip="true"
                    label="企业名称"
                  ></el-table-column>
                  <el-table-column
                    property="cityName"
                    width="70"
                    :show-overflow-tooltip="true"
                    label="地区"
                  ></el-table-column>
                  <el-table-column
                    property="revenue"
                    header-align="center"
                    align="center"
                    width="80"
                    :show-overflow-tooltip="true"
                    label="营收"
                  >
                    <template scope="scope">
                      <span>{{ scope.row.revenue === -1?'金额未知':scope.row.revenue }}</span>
                    </template>
                  </el-table-column>
                  <p slot="append" v-show="tableData1Length >= 10" style="text-align:center; line-height:50px;"><a href="javascript:;"  @click="getMData()" class="blue01">点击加载更多</a></p>
                </el-table>
              </div>
              <div id="tableColor1" v-show="active1 === 1">
                <el-table
                  ref="table2"
                  :data="tableData2"
                  style="width: 100%"
                  height="310"
                  :row-class-name="tableRowClassName"
                  :row-style="{ height: '0' }"
                  :cell-style="{ padding: '6px 0', height: '36px' }"
                >
                  <el-table-column
                    property="expertName"
                    :show-overflow-tooltip="true"
                    width="90"
                    label="人才姓名"
                  ></el-table-column>
                  <el-table-column
                    property="organization"
                    :show-overflow-tooltip="true"
                    label="所在机构"
                  ></el-table-column>
                  <p slot="append" v-show="tableData2Length >= 10" style="text-align:center; line-height:50px;"><a href="javascript:;"  @click="getMData()" class="blue01">点击加载更多</a></p>
                </el-table>
              </div>
              <div id="tableColor2" v-show="active1 === 2">
                <el-table
                  ref="table3"
                  :data="tableData3"
                  style="width: 100%"
                  height="310"
                  :row-class-name="tableRowClassName"
                  :row-style="{ height: '0' }"
                  :cell-style="{ padding: '6px 0', height: '36px' }"
                >
                  <el-table-column
                    property="patentName"
                    :show-overflow-tooltip="true"
                    label="技术描述"
                  ></el-table-column>
                  <el-table-column
                    property="applyCode"
                    width="160"
                    :show-overflow-tooltip="true"
                    label="申请人"
                  ></el-table-column>
                  <p slot="append" v-show="tableData3Length >= 10" style="text-align:center; line-height:50px;"><a href="javascript:;"  @click="getMData()" class="blue01">点击加载更多</a></p>
                </el-table>
              </div>
            </div>
            <div id="content">
              <img v-show="arrow === 0" src="../../../../../assets/img/industry/右箭头.png" @click="arrowClick(1)" alt="">
              <img v-show="arrow === 1" class="img" src="../../../../../assets/img/industry/左箭头.png" @click="arrowClick(0)" alt="">
            </div>
          </div>
        </div>
    </div>
</template>
<script>
const echarts = require("echarts");
export default {
  name: 'zfIndustrialChainMapTwo2',
  data () {
    return {
      myChart: null,
      option: null,
      arrow: 0,
      active1: 0,
      active2: 0,
      input1: '',
      searchValue: '',
      placeholder: '请输入企业名称进行搜索',
      briefIntroduction: '化工是“化学工艺”、“化学工业”、“化学工程”等的简称。凡运用化学方法改变物质组成、结构或合成新物质的技术，都属于化学生产技术，也就是化学工艺，所得产品被称为化学品或化工产品。起初，生产这类产品的是手工作坊，后来演变为工厂，并逐渐形成了一个特定的生产行业即化学工业。化学工程是研究化工产品生产过程共性规律的一门科学。人类与化工的关系十分密切，有些化工产品在人类发展历史中，起着划时代的重要作用，它们的生产和应用，甚至代表着人类文明的一定历史阶段。',
      nodeCode: '',
      searchShow:false,
      timeout:  null,
      branches: [],
      chartHeight: '',
      chartWidth: '',
      limit: 10,
      page1: 1,
      page2: 1,
      page3: 1,
      tableData1Length: 0,
      tableData2Length: 0,
      tableData3Length: 0,
      tableData1: [],
      tableData2: [],
      tableData3: [
      //   {
      //   description: '一种采用煤气合成天然气的方法',
      //   applicant: 'CN2012100511084',
      // },{
      //   description: '一种采用煤气合成天然气的方法',
      //   applicant: 'CN2012100511084',
      // },{
      //   description: '一种采用煤气合成天然气的方法',
      //   applicant: 'CN2012100511084',
      // }
      ],
      jsonData: {
        "name": "flare",
        "children": [
          {
          "name": "analytics",
          "children": [
            {
            "name": "cluster",
            "children": [
              {"name": "AgglomerativeCluster", "value": 3938},
              {"name": "CommunityStructure", "value": 3812},
              {"name": "HierarchicalCluster", "value": 6714},
              {"name": "MergeEdge", "value": 743}
            ]
            },
            {
            "name": "graph",
            "children": [
              {"name": "BetweennessCentrality", "value": 3534},
              {"name": "LinkDistance", "value": 5731},
              {"name": "MaxFlowMinCut", "value": 7840},
              {"name": "ShortestPaths", "value": 5914},
              {"name": "SpanningTree", "value": 3416}
            ]
            },
            {
            "name": "optimization",
            "children": [
              {"name": "AspectRatioBanker", "value": 7074}
            ]
            }
          ]
          },
          {
          "name": "animate",
          "children": [
            {"name": "Easing", "value": 17010},
            {"name": "FunctionSequence", "value": 5842},
            {
            "name": "interpolate",
            "children": [
              {"name": "ArrayInterpolator", "value": 1983},
              {"name": "ColorInterpolator", "value": 2047},
              {"name": "DateInterpolator", "value": 1375},
              {"name": "Interpolator", "value": 8746},
              {"name": "MatrixInterpolator", "value": 2202},
              {"name": "NumberInterpolator", "value": 1382},
              {"name": "ObjectInterpolator", "value": 1629},
              {"name": "PointInterpolator", "value": 1675},
              {"name": "RectangleInterpolator", "value": 2042}
            ]
            },
            {"name": "ISchedulable", "value": 1041},
            {"name": "Parallel", "value": 5176},
            {"name": "Pause", "value": 449},
            {"name": "Scheduler", "value": 5593},
            {"name": "Sequence", "value": 5534},
            {"name": "Transition", "value": 9201},
            {"name": "Transitioner", "value": 19975},
            {"name": "TransitionEvent", "value": 1116},
            {"name": "Tween", "value": 6006}
          ]
          },
          {
          "name": "data",
          "children": [
            {
            "name": "converters",
            "children": [
              {"name": "Converters", "value": 721},
              {"name": "DelimitedTextConverter", "value": 4294},
              {"name": "GraphMLConverter", "value": 9800},
              {"name": "IDataConverter", "value": 1314},
              {"name": "JSONConverter", "value": 2220}
            ]
            },
            {"name": "DataField", "value": 1759},
            {"name": "DataSchema", "value": 2165},
            {"name": "DataSet", "value": 586},
            {"name": "DataSource", "value": 3331},
            {"name": "DataTable", "value": 772},
            {"name": "DataUtil", "value": 3322}
          ]
          },
          {
          "name": "display",
          "children": [
            {"name": "DirtySprite", "value": 8833},
            {"name": "LineSprite", "value": 1732},
            {"name": "RectSprite", "value": 3623},
            {"name": "TextSprite", "value": 10066}
          ]
          },
          {
          "name": "flex",
          "children": [
            {"name": "FlareVis", "value": 4116}
          ]
          },
          {
          "name": "physics",
          "children": [
            {"name": "DragForce", "value": 1082},
            {"name": "GravityForce", "value": 1336},
            {"name": "IForce", "value": 319},
            {"name": "NBodyForce", "value": 10498},
            {"name": "Particle", "value": 2822},
            {"name": "Simulation", "value": 9983},
            {"name": "Spring", "value": 2213},
            {"name": "SpringForce", "value": 1681}
          ]
          },
          {
          "name": "query",
          "children": [
            {"name": "AggregateExpression", "value": 1616},
            {"name": "And", "value": 1027},
            {"name": "Arithmetic", "value": 3891},
            {"name": "Average", "value": 891},
            {"name": "BinaryExpression", "value": 2893},
            {"name": "Comparison", "value": 5103},
            {"name": "CompositeExpression", "value": 3677},
            {"name": "Count", "value": 781},
            {"name": "DateUtil", "value": 4141},
            {"name": "Distinct", "value": 933},
            {"name": "Expression", "value": 5130},
            {"name": "ExpressionIterator", "value": 3617},
            {"name": "Fn", "value": 3240},
            {"name": "If", "value": 2732},
            {"name": "IsA", "value": 2039},
            {"name": "Literal", "value": 1214},
            {"name": "Match", "value": 3748},
            {"name": "Maximum", "value": 843},
            {
            "name": "methods",
            "children": [
              {"name": "add", "value": 593},
              {"name": "and", "value": 330},
              {"name": "average", "value": 287},
              {"name": "count", "value": 277},
              {"name": "distinct", "value": 292},
              {"name": "div", "value": 595},
              {"name": "eq", "value": 594},
              {"name": "fn", "value": 460},
              {"name": "gt", "value": 603},
              {"name": "gte", "value": 625},
              {"name": "iff", "value": 748},
              {"name": "isa", "value": 461},
              {"name": "lt", "value": 597},
              {"name": "lte", "value": 619},
              {"name": "max", "value": 283},
              {"name": "min", "value": 283},
              {"name": "mod", "value": 591},
              {"name": "mul", "value": 603},
              {"name": "neq", "value": 599},
              {"name": "not", "value": 386},
              {"name": "or", "value": 323},
              {"name": "orderby", "value": 307},
              {"name": "range", "value": 772},
              {"name": "select", "value": 296},
              {"name": "stddev", "value": 363},
              {"name": "sub", "value": 600},
              {"name": "sum", "value": 280},
              {"name": "update", "value": 307},
              {"name": "variance", "value": 335},
              {"name": "where", "value": 299},
              {"name": "xor", "value": 354},
              {"name": "-", "value": 264}
            ]
            },
            {"name": "Minimum", "value": 843},
            {"name": "Not", "value": 1554},
            {"name": "Or", "value": 970},
            {"name": "Query", "value": 13896},
            {"name": "Range", "value": 1594},
            {"name": "StringUtil", "value": 4130},
            {"name": "Sum", "value": 791},
            {"name": "Variable", "value": 1124},
            {"name": "Variance", "value": 1876},
            {"name": "Xor", "value": 1101}
          ]
          },
          {
          "name": "scale",
          "children": [
            {"name": "IScaleMap", "value": 2105},
            {"name": "LinearScale", "value": 1316},
            {"name": "LogScale", "value": 3151},
            {"name": "OrdinalScale", "value": 3770},
            {"name": "QuantileScale", "value": 2435},
            {"name": "QuantitativeScale", "value": 4839},
            {"name": "RootScale", "value": 1756},
            {"name": "Scale", "value": 4268},
            {"name": "ScaleType", "value": 1821},
            {"name": "TimeScale", "value": 5833}
          ]
          },
          {
          "name": "util",
          "children": [
            {"name": "Arrays", "value": 8258},
            {"name": "Colors", "value": 10001},
            {"name": "Dates", "value": 8217},
            {"name": "Displays", "value": 12555},
            {"name": "Filter", "value": 2324},
            {"name": "Geometry", "value": 10993},
            {
            "name": "heap",
            "children": [
              {"name": "FibonacciHeap", "value": 9354},
              {"name": "HeapNode", "value": 1233}
            ]
            },
            {"name": "IEvaluable", "value": 335},
            {"name": "IP#BBDAFFicate", "value": 383},
            {"name": "IValueProxy", "value": 874},
            {
            "name": "math",
            "children": [
              {"name": "DenseMatrix", "value": 3165},
              {"name": "IMatrix", "value": 2815},
              {"name": "SparseMatrix", "value": 3366}
            ]
            },
            {"name": "Maths", "value": 17705},
            {"name": "Orientation", "value": 1486},
            {
            "name": "palette",
            "children": [
              {"name": "ColorPalette", "value": 6367},
              {"name": "Palette", "value": 1229},
              {"name": "ShapePalette", "value": 2059},
              {"name": "SizePalette", "value": 2291}
            ]
            },
            {"name": "Property", "value": 5559},
            {"name": "Shapes", "value": 19118},
            {"name": "Sort", "value": 6887},
            {"name": "Stats", "value": 6557},
            {"name": "Strings", "value": 22026}
          ]
          },
          {
          "name": "vis",
          "children": [
            {
            "name": "axis",
            "children": [
              {"name": "Axes", "value": 1302},
              {"name": "Axis", "value": 24593},
              {"name": "AxisGridLine", "value": 652},
              {"name": "AxisLabel", "value": 636},
              {"name": "CartesianAxes", "value": 6703}
            ]
            },
            {
            "name": "controls",
            "children": [
              {"name": "AnchorControl", "value": 2138},
              {"name": "ClickControl", "value": 3824},
              {"name": "Control", "value": 1353},
              {"name": "ControlList", "value": 4665},
              {"name": "DragControl", "value": 2649},
              {"name": "ExpandControl", "value": 2832},
              {"name": "HoverControl", "value": 4896},
              {"name": "IControl", "value": 763},
              {"name": "PanZoomControl", "value": 5222},
              {"name": "SelectionControl", "value": 7862},
              {"name": "TooltipControl", "value": 8435}
            ]
            },
            {
            "name": "data",
            "children": [
              {"name": "Data", "value": 20544},
              {"name": "DataList", "value": 19788},
              {"name": "DataSprite", "value": 10349},
              {"name": "EdgeSprite", "value": 3301},
              {"name": "NodeSprite", "value": 19382},
              {
              "name": "render",
              "children": [
                {"name": "ArrowType", "value": 698},
                {"name": "EdgeRenderer", "value": 5569},
                {"name": "IRenderer", "value": 353},
                {"name": "ShapeRenderer", "value": 2247}
              ]
              },
              {"name": "ScaleBinding", "value": 11275},
              {"name": "Tree", "value": 7147},
              {"name": "TreeBuilder", "value": 9930}
            ]
            },
            {
            "name": "events",
            "children": [
              {"name": "DataEvent", "value": 2313},
              {"name": "SelectionEvent", "value": 1880},
              {"name": "TooltipEvent", "value": 1701},
              {"name": "VisualizationEvent", "value": 1117}
            ]
            },
            {
            "name": "legend",
            "children": [
              {"name": "Legend", "value": 20859},
              {"name": "LegendItem", "value": 4614},
              {"name": "LegendRange", "value": 10530}
            ]
            },
            {
            "name": "operator",
            "children": [
              {
              "name": "distortion",
              "children": [
                {"name": "BifocalDistortion", "value": 4461},
                {"name": "Distortion", "value": 6314},
                {"name": "FisheyeDistortion", "value": 3444}
              ]
              },
              {
              "name": "encoder",
              "children": [
                {"name": "ColorEncoder", "value": 3179},
                {"name": "Encoder", "value": 4060},
                {"name": "PropertyEncoder", "value": 4138},
                {"name": "ShapeEncoder", "value": 1690},
                {"name": "SizeEncoder", "value": 1830}
              ]
              },
              {
              "name": "filter",
              "children": [
                {"name": "FisheyeTreeFilter", "value": 5219},
                {"name": "GraphDistanceFilter", "value": 3165},
                {"name": "VisibilityFilter", "value": 3509}
              ]
              },
              {"name": "IOperator", "value": 1286},
              {
              "name": "label",
              "children": [
                {"name": "Labeler", "value": 9956},
                {"name": "RadialLabeler", "value": 3899},
                {"name": "StackedAreaLabeler", "value": 3202}
              ]
              },
              {
              "name": "layout",
              "children": [
                {"name": "AxisLayout", "value": 6725},
                {"name": "BundledEdgeRouter", "value": 3727},
                {"name": "CircleLayout", "value": 9317},
                {"name": "CirclePackingLayout", "value": 12003},
                {"name": "DendrogramLayout", "value": 4853},
                {"name": "ForceDirectedLayout", "value": 8411},
                {"name": "IcicleTreeLayout", "value": 4864},
                {"name": "IndentedTreeLayout", "value": 3174},
                {"name": "Layout", "value": 7881},
                {"name": "NodeLinkTreeLayout", "value": 12870},
                {"name": "PieLayout", "value": 2728},
                {"name": "RadialTreeLayout", "value": 12348},
                {"name": "RandomLayout", "value": 870},
                {"name": "StackedAreaLayout", "value": 9121},
                {"name": "TreeMapLayout", "value": 9191}
              ]
              },
              {"name": "Operator", "value": 2490},
              {"name": "OperatorList", "value": 5248},
              {"name": "OperatorSequence", "value": 4190},
              {"name": "OperatorSwitch", "value": 2581},
              {"name": "SortOperator", "value": 2023}
            ]
            },
            {"name": "Visualization", "value": 16540}
          ]
          }
        ]
      }
    }
  },
  // 调用
  mounted () {
    this.$http.post(`/home/government/IndustrialChainMap/chainMap`, {})
      .then(({ data: res }) => {
        this.jsonData = res.data
        this.getAtlas()
        this.enterpriseChange()
      })
      .catch(() => {});
  },
  methods: {
    getMData() {
      if (this.active1 === 0) {
        this.page1++
        this.enterpriseChange()
      } else if (this.active1 === 1) {
        this.page2++
        this.personnelChange()
      } else if (this.active1 === 2) {
        this.page3++
        this.technologyChange()
      }
    },
    selectBtn1(val){
      if (this.active1 !== val) {
        this.active1 = val
        this.active2 = 0
        this.input1 = '',
        this.page1 = 1
        this.page2 = 1
        this.page3 = 1
        this.tableData1 = []
        this.tableData2 = []
        this.tableData3 = []
        this.$refs.table1.bodyWrapper.scrollTop = 0;
        this.$refs.table2.bodyWrapper.scrollTop = 0;
        this.$refs.table3.bodyWrapper.scrollTop = 0;
        if (val === 0) {
          this.placeholder = '请输入企业名称进行搜索'
          this.enterpriseChange()
        } else if (val === 1) {
          this.placeholder = '请输入人才名进行搜索'
          this.personnelChange()
        } else if (val === 2) {
          this.placeholder = '请输入关键词或专利号搜索'
          this.technologyChange()
        }
      }
    },
    selectBtn2(val){
      if (this.active2 !== val) {
        this.active2 = val
        this.$refs.table1.bodyWrapper.scrollTop = 0;
        this.tableData1 = []
        this.enterpriseChange()
      }
    },
    input1Change(){
      if (this.active1 === 0) {
        this.enterpriseChange()
      } else if (this.active1 === 1) {
        this.personnelChange()
      } else if (this.active1 === 2) {
        this.technologyChange()
      }
    },
    enterpriseChange(){
      this.$http.post(`/home/government/IndustrialChainMap/entQueryPage`, {
        entName: this.input1,
        nodeCode: this.nodeCode,
        type: this.active2,
        limit: this.limit,
        page:this.page1
      })
      .then(({ data: res }) => {
        this.tableData1Length = res.data.data.length
        res.data.data.forEach(item=>{
          this.tableData1.push(item)
        })
      })
      .catch(() => {});
    },
    personnelChange(){
      this.$http.post(`/home/government/IndustrialChainMap/peopleQueryPage`, {
        peopleName : this.input1,
        nodeCode: this.nodeCode,
        limit: this.limit,
        page:this.page2
      })
      .then(({ data: res }) => {
        this.tableData2Length = res.data.data.length
        res.data.data.forEach(item=>{
          this.tableData2.push(item)
        })
      })
      .catch(() => {});
    },
    technologyChange(){
      this.$http.post(`/home/government/IndustrialChainMap/patentQueryPage`, {
        patentName : this.input1,
        nodeCode: this.nodeCode,
        limit: this.limit,
        page:this.page3
      })
      .then(({ data: res }) => {
        this.tableData3Length = res.data.data.length
        res.data.data.forEach(item=>{
          this.tableData3.push(item)
        })
      })
      .catch(() => {});
    },
    arrowClick(val){
      this.arrow = val
      if (val === 1) {
        document.getElementById('bottomRight').style.right = '10px'
      } else if (val === 0) {
        document.getElementById('bottomRight').style.right = '380px'
      }
    },
    getAtlas(){
      let _this = this
      let fontSize=12;
      let zoom = .7
      this.myChart = echarts.init(document.getElementById("atlas"));
      this.option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: [_this.jsonData],
            top: '1%',
            left: '-10%',
            bottom: '1%',
            right: '30%',
            // symbolSize: [200,44],
            // symbol: 'image://https://hbimg.huabanimg.com/8ff62a3dc3f4f9d2493000d74e16e35c353b616a994-h6Y71t',
            // edgeShape: 'polyline',
            zoom:.7, //当前视角的缩放比例
            roam: true, //是否开启平游或缩放
            scaleLimit: { //滚轮缩放的极限控制
              min: 0.5,
              max: 5
            },
            label: {
              position: 'inside',
              verticalAlign: 'middle',
              align: 'center',
              fontSize: 8,
              color: '#ffffff',
              backgroundColor: {
                image:'https://hbimg.huabanimg.com/8ff62a3dc3f4f9d2493000d74e16e35c353b616a994-h6Y71t'
              },
              padding: [10,20],
              formatter: function(param){
                let str = param.data.name + '(' + param.data.zjEntQty + '/' + param.data.allEntQty + ')'
                return str
              }
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#1d5acc"
                }
              }
            },
            leaves: {
              label: {
                position: 'inside',
                verticalAlign: 'middle',
                align: 'center',
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            initialTreeDepth: 2,
            expandAndCollapse: true,
            animationDuration: 0,
            animationDurationUpdate: 750
          }
        ]
      }
      this.myChart.setOption(this.option);
      this.myChart.on("click", function (param) {
        console.log(param);
        _this.briefIntroduction = param.data.description
        _this.nodeCode = param.data.industryNodeId
        // _this.resize()
      })
      // let preZoom = 1.5;
      // let num1 = 16.25
      // let num2 = 0
      // let num = 0
      // //设置文字(缩放文字)
      // this.myChart.getZr().on("mousewheel", function (param) {
      //   let a = num + param.wheelDelta
      //   if (a !== num1 && a !== num2) {
      //     fontSize = 8 + param.wheelDelta;
      //     _this.option.series[0].label.fontSize = fontSize;
      //     _this.option.series[0].label.lineHeight = fontSize * 1.25;
      //     num += param.wheelDelta
      //     _this.myChart.setOption(_this.option);
      //   }
      // });
      // window.onresize = function() {
      //   _this.myChart.resize();
		  // }
      
    },
//     resize(){
//       let _this = this
//       let elesArr = Array.from(new Set(_this.myChart._chartsViews[0]._data._graphicEls));
//       let dep=_this.myChart._chartsViews[0]._data.tree.root.height;//获取树高
//       let layer_height=100;     //层级之间的高度
//       let currentHeight = layer_height * (dep+1) || layer_height;
//       let newHeight = Math.max(currentHeight, layer_height);
//       _this.chartHeight=newHeight+'px';
//       let layer_width = 100; // 兄弟节点之间的距离
//       let currentWidth = layer_width * (elesArr.length - 1) || layer_width;
//       let newWidth = Math.max(currentWidth, layer_width);
//       _this.chartWidth=newWidth+'px';
//       // document.getElementById("atlas").style.height = _this.chartWidth
//       _this.myChart.resize();
 
//  },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "table-row1";
      } else {
        return "table-row2";
      }
    },
    openAndClose(val){
      this.myChart.dispose();
      // document.getElementById("atlas").style.height = '5000px'
      // this.resize()
      this.getAtlas()
      if (val === 0) {
        this.option.series[0].zoom = 1.5
        this.option.series[0].initialTreeDepth = -1
        this.myChart.setOption(this.option, true);
      } else {
        this.option.series[0].zoom = .7
        this.option.series[0].initialTreeDepth = 2
        this.myChart.setOption(this.option, true);
      }
    },
    querySearchAsync(queryString, cb){
      let results
      this.$http.post(`/home/government/IndustrialChainMap/chainMapSelector`, {nodeName: queryString})
        .then(({ data: res }) => {
          let arr = []
          res.data.forEach(item=>{
            arr.push({
              ...item,
              value: item.nodeName
            })
          })
          results = arr
        })
      .catch(() => {});
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    getChild(data,ids){
      let _this = this
      if(ids.length>0 && data.children){
        ids.forEach(item => {
          if (item == data.industryNodeId) {
            data.collapsed = false;
          }
        });
        echarts.util.each(data.children, function (datum, index) {
          if(datum.children){
            return _this.getChild(datum,ids);
          }
        });
      }else{
        return null;
      }
    },
    handleSelect(item){
      console.log(item);
      let _this = this
      if(item.nodePath.length > 0){
        _this.getChild(_this.jsonData,item.nodePath);
      }
      _this.myChart.setOption(_this.option);
      // //找出所有含子节点的节点
      // var branches = [];//新建数组
      // function checkChildNodes(params){
      //     if(params.data !='' && params.data != null){//如果有data属性
      //         if(params.data.children !='' && params.data.children != null){//如果有子节点
      //             if(!branches.includes(params.data.name)){//避免重复添加
      //                 branches.push(params.data.name);//添加到数组
      //             }
      //             for(var b=0; b<params.data.children.length; b++){//检查该节点的子节点
      //                 checkChildNodes(params.data.children[b]);
      //             }
      //         }
      //     }else if(params.children !='' && params.children != null){//如果有子节点但没有data属性
      //         if(!branches.includes(params.name)){
      //             branches.push(params.name);//添加
      //         }
      //         for(var b=0; b<params.children.length; b++){
      //             checkChildNodes(params.children[b]);//遍历树结构
      //         }
      //     }else return;
      // }
      // //对搜索到的结果路径上的所有节点设置展开
      // function checkChildren(params,arr,node){
      //   if(params.data != '' && params.data != null && arr.includes(params.data.name)){//若数组中节点有data属性
      //     for(var c=0; c<params.data.children.length; c++){//对其所有子节点
      //       if(params.data.children[c].name.match(node) || params.data.children[c].collapsed==false){//如果匹配搜索或子节点已展开
      //         params.data.collapsed = false;//将其设为展开（结果展开/上一级展开）
      //         return;
      //       }
      //       checkChildren(params.data.children[c],arr,node);
      //     }
      //   }else if((params.data == '' || params.data == null) && arr.includes(params.name)){//若数组中节点无data属性
      //       for(var c=0; c<params.children.length; c++){//对其所有子节点
      //           if(params.children[c].name.match(node) || params.children[c].collapsed==false){//如果匹配搜索或子节点已展开
      //               params.collapsed = false;//将其设为展开（结果展开/上一级展开）
      //               return;
      //           }
      //           checkChildren(params.children[c],arr,node);//遍历树结构
      //       }
      //   }else return;
      // }
      // // this.myChart.dispose();
      // // this.getAtlas()
      // this.option = {
      //   series:[{
      //     label: {
      //       formatter: function (params) {
      //         checkChildNodes(params);
      //         checkChildren(params,branches,item.value);
      //         if (params.name.match(item.value)) {
      //           return '{a|' + params.name + '}';
      //         } else {
      //           return params.name;
      //         }
      //       },
      //     },
      //   }],
      // }
      // console.log(111);
      // this.myChart.setOption(this.option);
      // console.log(this.option);
    }
  }
}
</script>
<style lang="scss" scoped>
.main{
  padding: 90px 0;
  overflow:hidden
}
#box{
  width: 100%;
  height: 610px;
  position: relative;
}
.atlasAll{
  width: 100%;
  height: 610px;
  position: absolute;
  overflow: hidden;
  #atlas{
    width: 100%;
    margin-top: 50px;
    height: 520px;
  }
  .top{
    position: absolute;
    width: 230px;
    top: 10px;
    left: 60%;
    // margin-left: 150px;
    overflow: hidden;
    .searchIcon{
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #e0e9fa;
      float: right;
      margin-left: 10px;
      cursor: pointer;
    }
    .searchInput{
      width: 180px;
      height: 40px;
      float: left;
      /deep/ .el-input__inner{
        border-radius: 0;
        border: none;
      }
    }
  }
  .bottom{
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -118px;
    button{
      background: linear-gradient(
        0deg,
        rgba(0, 180, 255, 0.4),
        rgba(0, 180, 255, 0.05)
      );
      border: 1px solid #52CCFF;
      color: #52CCFF;
      padding: 5px 20px;
      margin: 0 10px;
      border-radius: 2px;
      cursor: pointer;
    }
    button:hover{
      background: linear-gradient(
        0deg,
        #52CCFF,
        rgba(0, 180, 255, 0.05)
      );
    }
  }
}

#upperStrata{
  width: 25%;
  position: absolute;
  right: 0;
  overflow: hidden;
}
#content{
  height: 610px;
  float: right;
  position: relative;
  img{
    position: absolute;
    top: 50%;
    margin-top: -45px;
    left: -13px;
    cursor: pointer;
  }
  .img{
    left: 0;
    position: relative;
  }
}

#right{
  width: 95%;
  height: 610px;
  padding: 10px;
  float: right;
  margin-right: 1%;
  background-image: url('../../../../../assets/img/industry/右箭头大框 (2).png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url("../../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  color: #ffffff;

  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.btn1{
  overflow:hidden;
  margin-top: 10px;
  margin-bottom: 20px;
  div{
    float: right;
    padding: 5px 20px;
    color: #52CCFF;
    text-align: center;
    cursor: pointer;
  }
}
.selectBtn{
  background: linear-gradient(
    0deg,
    rgba(0, 180, 255, 0.4),
    rgba(0, 180, 255, 0.05)
  );
  border: 1px solid #52CCFF;
  border-radius: 3px;
}
.input1 /deep/ .el-input__inner{
  background-color: #041565!important;
  border: 1px solid #3573FC!important;
  color: #ffffff!important;
}
.input1 /deep/::-webkit-input-placeholder{
  color:#BBDAFF!important;
}
.input1 /deep/::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color:#BBDAFF!important;
}
.input1 /deep/:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color:#BBDAFF!important;
}
.input1 /deep/:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
  color:#BBDAFF!important;
}
.input1 /deep/.el-input__prefix{
  color:#52CCFF!important;
}
/deep/ .table-row1 {
  background-color: #082560 !important;
}
/deep/ .table-row2 {
  background-color: #051e79 !important;
}
/deep/ .el-table tr {
  color: #bbdaff;
}
/deep/ .el-table tr {
  color: #bbdaff;
}
/deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff;
    }
  }
}
/deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}
/deep/ .el-table__body {
  width: 100% !important;
}
/deep/ .el-table__header .is-leaf {
  padding: 8px 0 !important;
}
#tableColor1,
#tableColor2,
#tableColor3 {
  width: 100%;
}
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
/deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
  font-size: 12px;
  padding: 6px 0;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  display: none;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0);
  border-radius: 10px;
  background: #ededed;
}
#bottomRight{
  position: absolute;
  bottom: 10px;
  right: 380px;
  color:#ffffff
}
.blue01{
  color: #00e4ff
}
</style>
